<template>
  <div class="layout" style="margin-left: -30px;margin-top: -10px;">
    <div style="background-color: #185010;height: 47px">
      <span class="xui-logo"></span>
      <span class="jimu-header">新屹数据中心 </span>
    </div>
    <Layout>
      <Sider
        breakpoint="md"
        collapsible
        :collapsed-width="78"
        v-model="isCollapsed"
      >
        <i-menu
          theme="primary"
          width="auto"
          :class="menuitemClasses"
          active-name="datainfo"
          :open-names="['sub']"
          @on-select="onMenuSelect"
        >
          <Submenu name="sub">
            <template slot="title">
              <Icon type="ios-apps"></Icon>
              报表管理
            </template>
            <Menu-Item name="datainfo">
              <Icon type="md-list"></Icon>
              <span>数据报表</span>
            </Menu-Item>
            <Menu-Item name="chartinfo">
              <Icon type="md-images"></Icon>
              <span>图形报表</span>
            </Menu-Item>
            <!--<Menu-Item name="printinfo">
                            <Icon type="md-print"></Icon>
                            <span>打印设计</span>
                        </Menu-Item>-->
          </Submenu>
        </i-menu>
        <div slot="trigger"></div>
        <div
          style="width: 100%;text-align:center;display:table;position: absolute;bottom: 20px"
        >
          <i-button type="primary" @click="showDataWareHouse">图表仓</i-button>
        </div>
      </Sider>
      <Tabs value="name1" style="width: 100%" @on-click="tabsClick">
        <tab-pane
          icon="md-desktop"
          label="报表设计"
          name="name1"
          class="jimu-tab"
        >
          <div
            style="display: flex;justify-content:space-between;margin-left:16px;margin-right: 38px;"
          >
            <div>
              <i-input
                size="small"
                v-model="name"
                @keyup.enter.native="enterSearchClick"
                placeholder="回车搜索报表名称"
              ></i-input>
            </div>
            <div class="page">
              <Page
                :total="page.total"
                show-total
                show-elevator
                :page-size="page.size"
                show-sizer
                @on-change="handleCurrentChange"
                @on-page-size-change="handleSizeChange"
                size="small"
              >
              </Page>
            </div>
            <div>
              <i-select
                transfer="true"
                v-model="previewModel"
                size="small"
                style="width: 78px;text-align: center;"
              >
                <i-option value="view" style="font-size: 10px">视图</i-option>
                <i-option value="list" style="font-size: 10px">列表</i-option>
              </i-select>
            </div>
          </div>
          <div
            style="display: flex;flex-wrap: wrap;"
            v-if="previewModel == 'view'"
          >
            <div class="excel-view-item excel-list-add">
              <a @click="createExcel">
                <i
                  class="ivu-icon ivu-icon-md-add"
                  style="font-size:20px; padding-bottom: 5px;"
                ></i>
                <p style="letter-spacing: 2px;font-size: 14px;">
                  {{ getNewName(menuitem) }}
                </p>
              </a>
            </div>

            <!-- 循环开始 &ndash;&gt;-->
            <div
              v-for="(item, index) in dataSource"
              :key="index"
              class="excel-view-item"
              @mouseover="item.editable = true"
              @mouseout="item.editable = false"
            >
              <!-- 缩略图 &ndash;&gt;-->
              <div class="thumb">
                <img :src="getThumbSrc(item)" />
                <div class="excel-edit-container" v-show="item.editable">
                  <a :href="getExcelEditUrl(item)" target="_blank">
                    设计
                  </a>
                </div>
              </div>

              <!-- 底部 &ndash;&gt;-->
              <div class="item-footer">
                <span class="item-name">{{ item.name }}</span>
                <div>
                  <a
                    class="opt-show"
                    :href="getExcelViewUrl(item)"
                    target="_blank"
                  >
                    <Tooltip content="预览模板" placement="top">
                      <i
                        class="ivu-icon ivu-icon-ios-eye-outline"
                        style="font-size: 16px"
                      ></i>
                    </Tooltip>
                  </a>
                  <!--<a class="opt-show" v-show="userMessage" @click="setTemplate(item,1)">
                                        <Tooltip content="收藏模板" placement="top">
                                            <i class="ivu-icon ivu-icon-ios-star-outline" style="font-size: 16px"></i>
                                        </Tooltip>
                                    </a>-->
                  <a class="opt-show" @click="handleDelete(item)">
                    <Tooltip content="删除模板" placement="top">
                      <i
                        class="ivu-icon ivu-icon-ios-trash"
                        style="font-size: 16px"
                      ></i>
                    </Tooltip>
                  </a>
                  <a class="opt-show" @click="handleCopy(item)">
                    <Tooltip content="复制模板" placement="top">
                      <i
                        class="ivu-icon ivu-icon-ios-browsers"
                        style="font-size: 16px"
                      ></i>
                    </Tooltip>
                  </a>
                  <a class="opt-show" @click="handleShare(item.id)">
                    <Tooltip content="分享" placement="top">
                      <i
                        class="ivu-icon ivu-icon-ios-share-alt"
                        style="font-size: 16px"
                      ></i>
                    </Tooltip>
                  </a>

                  <a class="opt-show">
                    <Upload
                      :headers="uploadHeader"
                      :before-upload="handleUpload"
                      :data="{ id: item.id }"
                      :action="actionUrl"
                      :format="['jpg', 'jpeg', 'png']"
                      :on-format-error="handleFormatError"
                      :on-exceeded-size="handleMaxSize"
                      :on-success="handleSuccess"
                    >
                      <Tooltip content="上传封面" placement="top-end">
                        <i
                          class="ivu-icon ivu-icon-md-image"
                          style="font-size: 16px"
                        ></i>
                      </Tooltip>
                    </Upload>
                  </a>
                </div>
              </div>
            </div>
            <!-- 循环结束 &ndash;&gt;-->
          </div>
          <div v-else style="padding: 10px 10px">
            <i-button
              type="primary"
              @click="createExcel"
              size="small"
              style="margin-left: 6px;width:78px;font-size: 10px"
            >
              新建报表
            </i-button>
            <i-table
              size="small"
              style="margin-top: 10px"
              border
              :columns="listColumns"
              :data="dataSource"
            >
              <template slot-scope="{ row }" slot="action">
                <a
                  class="opt-list-show"
                  :href="getExcelViewUrl(row)"
                  target="_blank"
                >
                  <Tooltip transfer="true" content="预览模板" placement="top">
                    <i
                      class="ivu-icon ivu-icon-ios-eye-outline"
                      style="font-size: 16px"
                    ></i>
                  </Tooltip>
                </a>
                <a
                  class="opt-list-show"
                  :href="getExcelEditUrl(row)"
                  target="_blank"
                >
                  <Tooltip transfer="true" content="编辑" placement="top">
                    <i
                      class="ivu-icon ivu-icon-md-create"
                      style="font-size: 16px"
                    ></i>
                  </Tooltip>
                </a>
                <a class="opt-list-show" @click="handleDelete(row)">
                  <Tooltip transfer="true" content="删除模板" placement="top">
                    <i
                      class="ivu-icon ivu-icon-ios-trash"
                      style="font-size: 16px"
                    ></i>
                  </Tooltip>
                </a>
                <a class="opt-list-show" @click="handleCopy(row)">
                  <Tooltip transfer="true" content="复制模板" placement="top">
                    <i
                      class="ivu-icon ivu-icon-ios-browsers"
                      style="font-size: 16px"
                    ></i>
                  </Tooltip>
                </a>
              </template>
            </i-table>
          </div>
        </tab-pane>
      </Tabs>
    </Layout>
    <!--分享弹窗-->
    <Jurisdiction ref="jurisdiction"></Jurisdiction>
  </div>
  <!-- <i-button @click="show">Click me!</i-button>
    <Modal v-model="visible" title="Welcome">Welcome to ViewUI</Modal>-->
</template>
<script>
import Jurisdiction from "../components/jurisdiction.vue"
export default {
  name: "list",
  data() {
    return {
      isCollapsed: false,
      name: "",
      designerObj: {},
      loading: true,
      showEdit: false,
      dataSource: [],
      modalTitle: "",
      page: {
        //分页参数
        page: 1,
        size: 10,
        total: 0
      },
      changecode: "",
      changename: "",
      menuitem: "datainfo",
      tabpan: "name1",
      userMessage: false,
      file: null,
      uploadHeader: {},
      actionUrl: "",
      previewModel: "view", //浏览方式
      listColumns: [
        {
          title: "报表名称",
          key: "name",
          align: "left",
          className: "table-background"
        },
        {
          title: "操作",
          width: 240,
          align: "center",
          slot: "action",
          className: "table-background",
          fixed: "right"
        }
      ] //列表的列
    };
  },
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  mounted: function() {
    console.log("list_mount--------------", this.token);
    this.uploadHeader = { "X-Access-Token": this.token };
    this.actionUrl = "/dataCenter" + "/jmreport/putFile";
    this.$nextTick(() => {
      this.dataSource = [];
      this.userInfo();
    });
  },
  components: {
    Jurisdiction
  },
  methods: {
    handleSizeChange(val) {
      this.page.size = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.loadData();
    },
    show: function() {},
    //查询用户信息并加载数据
    userInfo: function() {
      var that = this;
      this.$http.get(
        {
          url: this.api.userInfo,
          data: {
            token: that.token
          },
          success: result => {
            if (result.message != null && result.message != "") {
              if (result.message === "admin") {
                that.userMessage = true;
              }
            }
            that.$nextTick(() => {
              that.loadData();
            });
          },
          error: err => {
            that.handleSpinHide();
          }
        },
        that
      );
    },
    //加载数据
    loadData: function(name) {
      var that = this;
      if (name != null && name != "") {
        that.tabpan = name;
        that.page = { page: 1, size: 10, total: 0 };
      }
      var url = "";
      that.dataSource = [];
      if (that.tabpan == "name1") {
        url = this.api.excelQuery;
      } else {
        url = this.api.excelQueryByTemplate;
      }
      this.$http.get(
        {
          url: url,
          data: {
            pageNo: that.page.page,
            pageSize: that.page.size,
            reportType: that.menuitem,
            name: that.name,
            token: that.token
          },
          success: result => {
            var ls = result.records;
            that.page.total = result.total;
            if (ls && ls.length > 0) {
              for (var i = 0; i < ls.length; i++) {
                //预览时设置报表打印宽度
                let jsonStr = ls[i].jsonStr;
                let width;
                if (jsonStr) {
                  jsonStr = JSON.parse(jsonStr);
                  width = jsonStr.printElWidth || jsonStr.dataRectWidth || 800;
                  ls[i].printWidth = width;
                }
                ls[i].editable = false;
              }
              that.$nextTick(() => {
                that.dataSource = JSON.parse(JSON.stringify(ls));
              });
            }
          },
          error: err => {
            that.handleSpinHide();
          }
        },
        that
      );
    },
    getNewName: function(name) {
      let aName = "";
      if (name == "datainfo") {
        aName = "新建报表";
      } else if (name == "chartinfo") {
        aName = "新建图表";
      }
      return aName;
    },
    //新建报表
    createExcel: function() {
      var that = this;
      this.$http.post(
        {
          url: this.api.saveReport,
          data: {},
          contentType: "json",
          success: result => {
            //update-begin---author:wangshuai ---date:20220215  for：[issues/I4SOSH]做完的报表，预览生成的访问地址，默认都加了token=null------------
            let url =
              "/edit/" + result.id + "?menuType=" + this.menuitem;
            window.open(this.splicingToken(url));
            //update-end---author:wangshuai ---date:20220215  for：[issues/I4SOSH]做完的报表，预览生成的访问地址，默认都加了token=null------------
          }
        },
        that
      );
    },
    //打开图表仓
    showDataWareHouse: function() {
      // let url = this.api.getWareHouseView;
      window.open('/listView', "_blank");
    },
    //未使用
    handleEditConfig: function(item) {
      window.location.href =
        "/edit/" + item.id + "?token=" + this.token;
    },
    /**
     * 为路径拼接token
     * @param url 需要拼接的路径
     * @return 拼接后的token
     */
    splicingToken(url) {
      if (this.token && "null" != this.token) {
        if (url.indexOf("?") != -1) {
          url = url + "&token=" + this.token;
        } else {
          url = url + "?token=" + this.token;
        }
      }
      return url;
    },
    //删除报表
    handleDelete: function(item) {
      this.$http.confirm(
        {
          title: "删除报表",
          content: "是否确认删除?",
          url: this.api.deleteReport,
          data: {
            id: item.id,
            token: this.token
          },
          success: result => {
            this.loadData();
          }
        },
        this
      );
    },
    //复制模版
    handleCopy: function(item) {
      this.$http.confirm(
        {
          title: "复制报表",
          content: "是否确认复制?",
          url: this.api.reportCopy,
          method: "get",
          data: {
            id: item.id,
            token: this.token
          },
          success: result => {
            this.loadData();
          }
        },
        this
      );
    },
    handlerViewExcel: function(item) {
      console.log(item);
    },
    getExcelEditUrl: function(item) {
      return this.splicingToken("/edit/" + item.id);
    },
    getExcelViewUrl: function(item) {
      return this.splicingToken("/view/" + item.id);
    },
    getLabelText1: function(createElement) {
      return createElement(
        "div",
        {
          style: { color: "#fff" }
        },
        [createElement("Icon", { props: { type: "ios-checkmark" } }), "模板库"]
      );
    },
    onMenuSelect: function(name) {
      this.menuitem = name;
      this.page = { page: 1, size: 10, total: 0 };
      this.dataSource = [];
      this.name = "";
      this.loadData();
    },
    //报表设计和模板案例点击事件
    tabsClick(name) {
      this.name = "";
      this.loadData(name);
    },
    //回车搜索事件
    enterSearchClick() {
      this.loadData();
    },
    //设置取消模版
    setTemplate: function(item, arg) {
      var content = arg == 1 ? "是否确认设置为模板?" : "是否确认取消模板?";
      let title = arg == 1 ? "收藏报表" : "取消收藏报表";
      this.$http.confirm(
        {
          title: title,
          content: content,
          url: this.api.setTemplate,
          method: "get",
          data: {
            id: item.id,
            template: arg,
            token: this.token
          },
          success: result => {
            this.loadData();
          }
        },
        this
      );
    },
    handleUpload(file) {
      this.file = file;
      return true;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc:
          "文件 " + file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。"
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "超出文件大小限制",
        desc: "文件 " + file.name + " 太大，不能超过 2M。"
      });
    },
    handleSuccess(res) {
      if (res != null) {
        this.$Message.success(res.message);
        this.dataSource.forEach((item, index, array) => {
          if (item.id === res.result.id) {
            item.thumb = res.result.thumb;
          }
        });
      }
    },
    handleSpinHide() {
      /* setTimeout(() => {
                    this.$Spin.hide();
                }, 3000);*/
    },
    //分享按钮点击事件
    handleShare(id) {
      this.$http.get({
        url: this.api.queryJurisdiction,
        data: { reportId: id },
        success: result => {
          if (result) {
            if (result.status == "0") {
              let protocol = window.location.protocol;
              let host = window.location.host;
              let url = protocol + "//" + host + base;
              result.previewUrl = url + result.previewUrl;
              this.$refs.jurisdiction.jurisdictionData = result;
              this.$refs.jurisdiction.shareUrlModal = true;
            } else {
              this.$refs.jurisdiction.jurisdictionData = result;
              this.$refs.jurisdiction.shareModal = true;
            }
          } else {
            this.$refs.jurisdiction.jurisdictionData.reportId = id;
            this.$refs.jurisdiction.shareModal = true;
          }
        }
      });
    },
    // 获取缩略图的预览地址
    getThumbSrc(item) {
      //debugger
      if (!item.thumb) {
        let tp = "";
        if (this.menuitem == "datainfo") {
          tp = "oabc";
        } else if (this.menuitem == "chartinfo") {
          tp = "oabd";
        }
        return "/dataCenter" + "/jmreport/desreport_/corelib/" + tp + ".jpeg";
      } else {
        if (item.thumb.indexOf("http") == 0) {
          return item.thumb;
        } else {
          return "/dataCenter" + "/jmreport/img/" + item.thumb;
        }
      }
    }
  }
};
</script>
<style>

    html,
    body,
    #app,
    .layout{
        height: 100%;
    }

    .ivu-page,
    .ivu-page-prev,
    .ivu-page-next,
    .ivu-select-selection,
    .ivu-select-dropdown,
    .ivu-page.mini .ivu-page-options-elevator input
    {
        background-color: #ffffff;
        color: #515a6e;
    }
    .page{
        display: flex;
        justify-content: center;
        -webkit-box-pack: center;
    }
    .ivu-page-item{
        background-color: #ffffff;
        border: 1px solid rgba(131, 125, 125, 0.5);
    }
    .ivu-page-item-active{
        background-color: white;
        border: 1px solid #409eff;
    }
    .ivu-page-item a{
        margin: 0 6px;
        text-decoration: none;
        color: #515a6e;
    }
    .ivu-page-next a, .ivu-page-prev a {
        font-size: 14px;
        color: #515a6e;
    }
    .ivu-spin-fix{
        background-color: rgba(131, 125, 125, 0.5);
    }
</style>
<style>
    .title{
        font-size: 20px;
        color: #000000;
        text-align: center;
        line-height: 60px;
        font-weight: 500;
    }
    .ivu-layout-sider {
        transition: all .2s ease-in-out;
        position: relative;
        background: #ffffff;
    }
    .ivu-layout {
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-flex: 1;
        flex: auto;
        background: #ffffff;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title  {
        background: #ffffff;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
        background: #ffffff;
    }
    .ivu-upload-list{
        display: none;
    }
    .ivu-table-tip table tbody tr td{
        background-color: ffffff;
        color: #000000;
    }
    .ivu-select-dropdown-list .ivu-select-item-focus{
        background: none !important;
    }
</style>